import React from 'react';
import PropTypes from 'prop-types';
import { getIntroPointState, setIntroPointState } from 'api';
import track from 'utils/track';
import './index.scss';
import CreateProjectModal from 'components/createProjectModal/loadable';
import utils from 'utils/index';
import ImportProjectModal from 'components/importProjectModal/loadable';
import { ProductDialog } from '@teamix/lead';
import intl from '../../../../../../../../locale';

const defaultNamespaceId = utils.getUrlSearchParam('namespace_id');
const welcomePage = 'Dialog-NewUserGuidance';
const { user_role } = window.FORCE.organization;

export default class WelcomeToUseCodeupTooltipDialog extends React.Component {
  state = {
    visible: false,
    createModalShow: false,
    importModalShow: false,
  };

  static propTypes = {
    show: PropTypes.bool,
    onClose: PropTypes.func,
    repoCreatorIdentity: PropTypes.array,
  };

  static defaultProps = {
    show: undefined,
    onClose: undefined,
  };

  UNSAFE_componentWillMount() {
    const { show } = this.props;
    if (show === undefined) {
      this.getIfDialogShow();
    } else {
      this.setState({
        visible: show,
      });
    }
  }

  getIfDialogShow = () => {
    getIntroPointState('welcome_to_use_codeup_pop')
      .then((result) => {
        if (result.state) {
          this.setState({
            visible: result.state,
          });
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };

  setIfDialogShow = () => {
    setIntroPointState('welcome_to_use_codeup_pop')
      .then(() => {
        this.setState({
          visible: false,
        });
      })
      .catch((err) => {
        console.error(err);
      });
  };

  onClose = () => {
    track({
      action: 'close_guidance',
      page: welcomePage,
    });

    this.setState({
      visible: false,
    });

    this.setIfDialogShow();
    if (this.props.onClose !== undefined) {
      this.props.onClose();
    }
  };

  openNewProjectModal = () => {
    this.setIfDialogShow();
    track({
      action: 'new_repo',
      page: welcomePage,
    });

    this.setState({
      createModalShow: true,
    });
  };

  openImportProjectModal = () => {
    this.setIfDialogShow();
    track({
      action: 'import_repo',
      page: welcomePage,
    });

    this.setState({
      importModalShow: true,
    });
  };

  closeModal = (type) => {
    this.setState({
      [type]: false,
    });
  };

  render() {
    const { visible, createModalShow, importModalShow } = this.state;
    const { repoCreatorIdentity } = this.props;
    const allowCreateRepo = utils.allowCreateRepo(repoCreatorIdentity, user_role);

    return (
      <>
        <ProductDialog
          title={
            <>
              {intl.get({
                id: 'code-assets.containers.welcomeDialog.WelcomeToYunxiaoCodeManagement',
                defaultMessage: '欢迎来到云效代码管理',
              })}{' '}
              Codeup
            </>
          }
          visible={visible}
          onClose={this.onClose}
          // logo="https://img.alicdn.com/tfs/TB1IjjvPuH2gK0jSZJnXXaT1FXa-348-60.png"
          logo="https://img.alicdn.com/imgextra/i3/O1CN01zvIAxP2351aMyLigs_!!6000000007203-2-tps-922-122.png"
          slides={[
            {
              text: intl.get({
                id: 'code-assets.containers.welcomeDialog.AddCodeLibrary',
                defaultMessage: '添加代码库',
              }),
              src: 'https://img.alicdn.com/imgextra/i1/O1CN01IrhoHn1xUJkwu8gJ4_!!6000000006446-2-tps-1480-530.png',
            },
            {
              text: intl.get({
                id: 'code-assets.containers.welcomeDialog.AutomatedScanning',
                defaultMessage: '自动化扫描',
              }),
              src: 'https://img.alicdn.com/tfs/TB17.9.sAT2gK0jSZFkXXcIQFXa-1480-530.png',
            },
            {
              text: intl.get({
                id: 'code-assets.containers.welcomeDialog.CodeReview',
                defaultMessage: '代码评审',
              }),
              src: 'https://img.alicdn.com/tfs/TB1hvi6svb2gK0jSZK9XXaEgFXa-1480-530.png',
            },
            {
              text: intl.get({
                id: 'code-assets.containers.welcomeDialog.DocumentManagement',
                defaultMessage: '文档管理',
              }),
              src: 'https://img.alicdn.com/tfs/TB1vEC_srH1gK0jSZFwXXc7aXXa-1480-530.png',
            },
          ]}
          buttons={
            allowCreateRepo
              ? [
                  {
                    type: 'primary',
                    text: intl.get({
                      id: 'code-assets.src.utils.locale.CreateACodeLibrary',
                      defaultMessage: '新建代码库',
                    }),
                    dance: true,
                    onClick: this.openNewProjectModal,
                  },
                  {
                    text: intl.get({
                      id: 'code-assets.src.utils.locale.ImportCodeLibrary',
                      defaultMessage: '导入代码库',
                    }),
                    dance: true,
                    onClick: this.openImportProjectModal,
                  },
                ]
              : []
          }
        />
        {createModalShow && (
          <CreateProjectModal
            defaultNamespaceId={defaultNamespaceId}
            closeModal={() => {
              this.closeModal('createModalShow');
            }}
            isModalOpen={createModalShow}
          />
        )}

        {importModalShow && (
          <ImportProjectModal
            defaultNamespaceId={defaultNamespaceId}
            closeModal={() => {
              this.closeModal('importModalShow');
            }}
            isModalOpen={importModalShow}
          />
        )}
      </>
    );
  }
}
